/* 商品列表
 *
 */
<template>
  <div class="shopping-selected between-box">
    <div
      class="commodity"
      v-for="item in commodity"
      :key="item.id"
      @click="topath(item)"
    >
      <img :src="item.image" />
      <div class="Pro-intro text-overflow">{{ item.name }}</div>
      <div class="Pro-vol">
        <span>销量300+</span>
        <span>好评300+</span>
      </div>
      <div class="Pro-price">￥{{ item.price }}</div>
      <div class="loction-text between-box">
        <span class="text-overflow">{{ item.yy.name }}</span>
        <span class="text-overflow">{{ item.yy.address }}</span>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  name: "",
  props: {
    page: {
      type: Number,
      default: 1,
    },
  },
  components: {},
  data() {
    return {
      commodity: [],
    };
  },
  methods: {
    //获取商品
    getGoodsList(e) {
      this.$api
        .getGoodsList({
          limit: 10,
          page: this.page,
          where: {
            city_id: 6,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            // console.log(res.data);
            if (e) {
              this.commodity = this.commodity.concat(res.data);
            } else {
              this.commodity = res.data;
            }
            this.$emit("setLoading", false);
            // console.log(this.commodity);
          }
        });
    },
    topath(item) {
      // console.log(item);
      if (sessionStorage.getItem("token")) {
        this.$router.push({
          path: "/details/commodityDetails",
          query: {
            _id: item.id,
          },
        });
      } else {
        this.$router.push('/login')
      }
    },
  },

  created() {
     //this.getGoodsList();
  },

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
$layout-size: 0 0.86rem;
$box-p: 0.65rem;
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.between-box {
  display: flex;
  justify-content: space-between;
}
.shopping-selected {
  width: 100%;
  padding: $layout-size;
  flex-wrap: wrap;
  .commodity {
    width: 48%;
    height: 15rem;
    background-color: #fff;
    margin-bottom: 0.65rem;
    img {
      width: 100%;
      height: 5.95rem;
    }
    .Pro-intro {
      width: 10rem;
      height: 2.5rem;
      padding: 0.54rem;
      font-size: 0.76rem;
      font-weight: 500;
      color: #333333;
    }
    .Pro-vol {
      span {
        font-size: 0.54rem;
        padding: 0.54rem;
        color: #909090;
      }
    }
    .Pro-price {
      font-size: 0.86rem;
      color: #f00000;
      padding: 0.54rem;
      font-weight: 600;
    }
    .loction-text {
      padding: 0.54rem;
      span {
        width: 4rem;
        font-size: 0.65rem;
        color: #666666;
        font-weight: 400;
      }
    }
  }
}
</style>